<!--
 * @Author: 肉蛋葱鸡 774707331@qq.com
 * @Date: 2025-02-26 22:02:39
 * @LastEditors: 肉蛋葱鸡 774707331@qq.com
 * @LastEditTime: 2025-02-27 23:17:50
 * @FilePath: /my-vue3-project/src/views/AboutView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="editor-container">
    <Editor :value="content" :plugins="plugins" ref="viewerContainer" :locale="zhHans" @change="handleChange" />
  </div>
</template>

<script setup>
import { ref, watch ,onMounted} from 'vue';
const content = ref('')
import { Editor } from '@bytemd/vue-next';
import zhHans from 'bytemd/locales/zh_Hans.json';
import 'bytemd/dist/index.css';
import uploadPicPlugin from '../plugin/uploadPic.js'
import uploadVideoPlugin from '../plugin/uploadVideo.js'
import { imageAttributesPlugin } from '../plugin/astPic.js'
import 'juejin-markdown-themes/dist/juejin.min.css';

// 插件配置
import gfm from '@bytemd/plugin-gfm';
import highlight from '@bytemd/plugin-highlight';
import frontmatter from '@bytemd/plugin-frontmatter';
import breaks from '@bytemd/plugin-breaks';
import gemoji from '@bytemd/plugin-gemoji';
import mediumZoom from '@bytemd/plugin-medium-zoom';


let observer;
const viewerContainer = ref(null)

onMounted(() => {
  observer = new MutationObserver(mutations => {
    mutations.forEach(() => {
      processVideoElements();
    });
  });
  
  observer.observe(viewerContainer.value.$el, {
    childList: true,
    subtree: true
  });
});

// 提取公共处理方法
const processVideoElements = () => {
  const markdownBodyElement = viewerContainer.value?.$el;
  if (!markdownBodyElement) return;

  // 调整选择器为精确匹配
  const images = markdownBodyElement.querySelectorAll('img[alt="video"]');
  console.log('Final images:', images);

  images.forEach((img) => {
        const videoUrl = img.getAttribute('src');
        const videoElement = document.createElement('video');
        videoElement.setAttribute('controls', 'controls');
        videoElement.setAttribute('width', 'auto');
        const sourceElement = document.createElement('source');
        sourceElement.setAttribute('src', videoUrl);
        sourceElement.setAttribute('type', 'video/mp4');
        videoElement.appendChild(sourceElement);
        const noSupportText = document.createTextNode('Sorry, your browser doesnt support embedded videos.');
        videoElement.appendChild(noSupportText);

        const parentParagraph = img.parentElement;
        if (parentParagraph) {
          parentParagraph.replaceChild(videoElement, img);
        }
      });
}


const uploadPic = () => {
  let upImg = `![image](${''}){width:600,height:400}`
  content.value += upImg
}

const uploadVideo = () => {
  let upVideo = `![video](${''}){width:600,height:400}`
  content.value += upVideo
}

const plugins = [gfm(), gemoji(), highlight(), frontmatter(), breaks(), mediumZoom(), uploadPicPlugin(uploadPic), uploadVideoPlugin(uploadVideo), imageAttributesPlugin()];

const handleChange = (v) => { content.value = v; };

// const handleEditorRendered = () => {
//   const handleVideoReplacement = () => {
//     const markdownBodyElement = document.querySelector('.markdown-body');
//     if (markdownBodyElement) {
//       const images = markdownBodyElement.querySelectorAll('img.medium-zoom-image[alt="video"]');
//       console.log(images, 'images');
//       images.forEach((img) => {
//         const videoUrl = img.getAttribute('src');
//         const videoElement = document.createElement('video');
//         videoElement.setAttribute('controls', 'controls');
//         videoElement.setAttribute('width', 'auto');
//         const sourceElement = document.createElement('source');
//         sourceElement.setAttribute('src', videoUrl);
//         sourceElement.setAttribute('type', 'video/mp4');
//         videoElement.appendChild(sourceElement);
//         const noSupportText = document.createTextNode('Sorry, your browser doesnt support embedded videos.');
//         videoElement.appendChild(noSupportText);

//         const parentParagraph = img.parentElement;
//         if (parentParagraph) {
//           parentParagraph.replaceChild(videoElement, img);
//         }
//       });
//     }
//   };

//   nextTick(handleVideoReplacement);
// };

watch(content, (newValue, oldValue) => {
  console.log(newValue, oldValue);
  processVideoElements();
  // 这里可以不做处理，依赖 handleEditorRendered 事件
});
</script>

<style scoped>
.editor-container {
  margin: 20px;

  .bytemd {
    border-radius: 8px;
  }
}
</style>